<template>
  <section class="todoapp">
    <TodoHeader></TodoHeader>
    <TodoMain
      :todoList="store.filterTodoList"
      :isAllDone="store.isAllDone"
    ></TodoMain>
    <TodoFooter
      :unDoneNumber="store.unDoneNumber"
      :todoList="store.filterTodoList"
    ></TodoFooter>
  </section>
</template>

<script setup lang="ts">
import TodoHeader from './components/TodoHeader.vue';
import TodoMain from './components/TodoMain.vue';
import TodoFooter from './components/TodoFooter.vue';
import { watchEffect, ref } from 'vue';
import useLocalStoage from './hooks/useLocalStoage';

import useTodoStore from './stores/todo';
let store = useTodoStore();
let isShow = ref(true);

watchEffect(() => {
  store.$subscribe((mutations, state) => {
    useLocalStoage('todomvc', state.todoList);
  });
});
</script>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>
